<template>
	<page-meta :root-font-size="fontSize"></page-meta>
	<view>
		<!-- 市级选择器 -->
		<u-select v-model="cityShow" :list="cityList" @confirm="confirm"></u-select>
		<!-- 自定义导航栏 -->
		<u-navbar title="站点选择">
			<!-- <view class="slot-wrap">
				<view class="search-wrap">
					<view style="margin-right: 20rpx;">南平 <u-icon name="arrow-down"></u-icon> </view>
					<u-search v-model="keyword" :show-action="showAction" height="56" @change="onInput" :action-style="{color: '#95a5a6'}" @custom="customClick" ></u-search>
				</view>
			</view> -->
			<view slot="right" style="margin-right: 20rpx;" @click="mapSelect">
				<u-icon size="40" name="map"></u-icon>
			</view>
		</u-navbar>
		<!-- <view class="slot-wrap" style="background-color: #FFFFFF;padding-top: 10rpx;">
			<view class="search-wrap">
				<view style="width: 100%;">
					<u-search v-model="keyword" :show-action="showAction" height="56" @change="onInput" :action-style="{color: '#95a5a6'}" @custom="customClick" ></u-search>
				</view>
			</view>
		</view> -->
		<view class="stationList jh_fs_28" :style="{ 'height':scrollHeight }" v-if="isShowList">
			<block v-for="(item,index) in keywordList" :key="index">
				<view class="listItem" @tap="itemClick(item)">
					<rich-text :nodes="item.htmlStr"></rich-text>
				</view>
			</block>
		</view>
		<!-- 搜索列表 -->
		<view class="stationList jh_fs_28" :style="{ 'height':scrollHeight }" v-if="isShowList">
			<block v-for="(item,index) in keywordList" :key="index">
				<view class="listItem" @tap="itemClick(item)">
					<rich-text :nodes="item.htmlStr"></rich-text>
				</view>
			</block>
		</view>
		<!-- 联动列表 -->
		<view class="list_box jh_fs_28" v-if="!isShowList">
			<!-- 左边的列表 -->
			<view class="left">
				<scroll-view scroll-y="true" :style="{ 'height':scrollHeight }">
					<view class="item jh_fs_28" 
						v-for="(item,index) in stationArray"
						:key="index" 
						:class="{ 'active':index==leftIndex }" 
						:data-index="index"
						@click="leftClick"
					>{{item.CityName}}</view>
		        </scroll-view>
			</view>
			<!-- 右边的列表 -->
			<view class="main" v-if="!isShowList">
				<swiper class="swiper" :style="{ 'height':scrollHeight }" 
					:current="leftIndex" @change="swiperChange"
					 vertical="true" duration="300">
					<swiper-item v-for="(item,index) in stationArray" :key="index">
						<scroll-view  scroll-y="true" :style="{ 'height':scrollHeight }">
							<view class="item">
								<view class="goods" v-for="(item2,index2) in item.Countys" :key="index2" @click="detailStationClick(item.CityName,item2.CountyName)">
									<view>
										<view>{{item2.CountyName}}</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	var _self;
	export default {
		data() {
			return {
				keyword: '',
				showAction: true,
				scrollHeight:'500px',
				isShowList:false,//是否显示站点列表
				keywordList:[],
				stationArray:[],
				mainArray:[],
				leftIndex:0,
				fontSize:'',
				stationType:'',
				cityList:[],//城市列表
				cityShow:false,//是否显示城市列表
				cityName:'南平',//默认显示的城市名称
				allCitylist:[],
				getonOffType:''
			}
		},
		onLoad(params) {
			_self = this;
			console.log(params);
			if(params.type){
				_self.getonOffType = params.type;
				//如果当前是在选择上车点，获取的是上车点的站点信息
				//如果当前选择的是下车点，使用上车点来请求下车点信息
				//获取站点信息
				_self.GetMidwaySiteNameByCode(params.startStation);
			}
			_self.stationType = params.stationType;
			_self.fontSize = getApp().globalData.fontSize;
			/* 设置当前滚动容器的高，若非窗口的高度，请自行修改 */
			uni.getSystemInfo({
				success:(res)=>{
					_self.scrollHeight=`${res.windowHeight}px`;
				}
			});
		},
		methods: {
			customClick(){
				console.log('点击了自定义按钮');
			},
			//--------------------------------------------地图选点--------------------------------------------
			mapSelect:function(){
				uni.navigateTo({
					url:'../../mapPoint/mapPointPicker?type=' + _self.getonOffType
				})
			},
			//--------------------------------------------点击下拉站点--------------------------------------------
			itemClick(params){
				console.log(params);
				uni.$emit('mapStaionChange', {
				    data: params.keyword,
					StationLocation:''
				});
				uni.navigateBack();
			},
			//--------------------------------------------左侧导航点击--------------------------------------------
			leftClick(e){
				let index = e.currentTarget.dataset.index;
				_self.leftIndex = Number(index);
				
			},
			/* 切换 */
			swiperChange(e){
				let index = e.detail.current;
				_self.leftIndex = Number(index);
			},
			//--------------------------------------------点击站点--------------------------------------------
			detailStationClick(CityName,CountyName){
				console.log(CityName,CountyName);
				if(_self.getonOffType == 'upStation'){
					uni.$emit('StartStaionChange', {
					    StationName: CityName + '-' + CountyName,
						// StationLocation:item.StationLocation
					});
				}else {
					uni.$emit('EndStaionChange', {
					    StationName: CityName + '-' + CountyName,
						// StationLocation:item.StationLocation
					});
				}
				
				uni.navigateBack();
			},
			//--------------------------------------------加载站点数据--------------------------------------------
			GetMidwaySiteNameByCode:function(startStation){
				uni.showLoading({
					title:'正在加载...'
				})
				uni.request({
					url:_self.$h.expressInterface.expressInterface.GetMidwaySiteNameByCode.url,
					method:_self.$h.expressInterface.expressInterface.GetMidwaySiteNameByCode.method,
					header:_self.$h.expressInterface.expressInterface.GetMidwaySiteNameByCode.header,
					data:{
						appSystemCode:_self.$h.expressInterface.expressInterface.appSystemCode.appSystemCode,
						startZoneName:startStation
					},
					success: (res) => {
						uni.hideLoading();
						console.log(res);
						// var stationArr = [];
						if (res.data.Success) {
							// _self.stationArray = JSON.parse(res.data.Data)[0].Countys;
							_self.stationArray = JSON.parse(res.data.Data);
							console.log(JSON.parse(res.data.Data));
							_self.allCitylist = JSON.parse(res.data.Data);
							for (var i = 0; i < _self.allCitylist.length; i++) {
								var cityNameArray = {
									value : i,
									label: _self.allCitylist[i].CityName
								}
								_self.cityList.push(cityNameArray);
							}
						}
					},
					fail(res) {
						console.log(res)
						uni.hideLoading();
					}
				})
			},
			//--------------------------------------------模糊查询--------------------------------------------
			GetSiteByKey:function(keyword){
				uni.showLoading();
				uni.request({
					url:_self.$h.expressInterface.expressInterface.GetSiteByKey.url,
					method:_self.$h.expressInterface.expressInterface.GetSiteByKey.method,
					header:_self.$h.expressInterface.expressInterface.GetSiteByKey.header,
					data:{
						appSystemCode:_self.$h.expressInterface.expressInterface.appSystemCode.appSystemCode,
						keyword:keyword
					},
					success: (res) => {
						console.log(JSON.parse(res.data.Data))
						uni.hideLoading();
						_self.keywordList = _self.drawCorrelativeKeyword(JSON.parse(res.data.Data), keyword);
					},
					fail(res) {
						console.log(res)
						uni.hideLoading();
					}
				})
			},
			//--------------------------------------------监听输入--------------------------------------------
			onInput(event){
				if(event){
					// _self.$u.debounce:防抖，500毫秒后没有继续操作的话再执行GetSiteByKey方法
					_self.$u.debounce(_self.GetSiteByKey(event),500);
				}else {
					_self.isShowList = false;
				}
				
				// var keyword = event.detail?event.detail.value:event;
				// _self.keywordList = _self.mainArray.filter(item => {
				// 	return item.countys.indexOf(event) != -1;
				// })
				// _self.keywordList = _self.drawCorrelativeKeyword(_self.keywordList, keyword);
			},
			//--------------------------------------------城市选择--------------------------------------------
			citySelect:function(){
				_self.cityShow = true;
			},
			confirm:function(params){
				//数据格式： [{"value": 1,"label": "厦门市"}]
				_self.cityName = params[0].label;
				for (var i = 0; i < _self.allCitylist.length; i++) {
					if(_self.allCitylist[i].CityName == params[0].label){
						_self.stationArray = _self.allCitylist[i].Countys;
					}
				}
			},
			//--------------------------------------------高亮关键字--------------------------------------------
			drawCorrelativeKeyword(keywords, keyword) {
				var len = keywords.length,
					keywordArr = [];
				for (var i = 0; i < len; i++) {
					var row = keywords[i].SiteName;
					//定义高亮#9f9f9f
					var html = row.replace(keyword, "<span style='color: #9f9f9f;'>" + keyword + "</span>");
					html = '<div>' + html + '</div>';
					var tmpObj = {
						keyword: row,
						htmlStr: html
					};
					keywordArr.push(tmpObj);
					_self.isShowList = true;
				}
				return keywordArr;
			},
		}
	}
</script>

<style lang="scss">
	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
	}
	.search-wrap {
		margin: 0 20rpx;
		flex: 1;
		display: flex;
		align-items: center;
	}
	//站点列表
	.stationList {
		margin-top: 10rpx;
		background-color: #FFFFFF;
		line-height: 80rpx;
		box-sizing: border-box;
		height: 100rpx;
		.listItem{
			margin-left: 20rpx;
			border-bottom: 1rpx solid #eeeeee;
		}
	}
	.list_box{
		display: flex;
	    flex-direction: row;
	    flex-wrap: nowrap;
	    justify-content: flex-start;
	    align-items: flex-start;
	    align-content: flex-start;
		
		.left{
			width: 200rpx;
			background-color: #f6f6f6;
			line-height: 80rpx;
			box-sizing: border-box;
			font-size: 32rpx;
			text-align: center;
			.item{
				padding-left: 20rpx;
				position: relative;
				&:not(:first-child) {
					margin-top: 1px;
				
					&::after {
						content: '';
						display: block;
						height: 0;
						border-top: #d6d6d6 solid 1px;
						width: 620upx;
						//如果这里使用绝对定位的话会出现第一次点击左边的列表之后左边的列表会消失
						// position: absolute;
						top: -1px;
						right: 0;
						transform:scaleY(0.5);	/* 1px像素 */
					}
				}
				
				&.active,&:active{
					color: #42b983;
					background-color: #fff;
				}
			}
		}
		.main{
			background-color: #fff;
			padding-left: 20rpx;
			width: 0;
			flex-grow: 1;
			box-sizing: border-box;
			
			.swiper{
				height: 500px;
			}
	
			
			.item{
				padding-bottom: 10rpx;
			}
		}
		.goods{
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: flex-start;
			align-items: center;
			align-content: center;
			margin-bottom: 10rpx;
			border-bottom: 1rpx solid #eeeeee;
			line-height: 80rpx;
		}
	}
</style>
